html,
body {
  margin: 0;
  height: 100%;
  display: grid;
  place-content: center;
}

@property --t {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@counter-style stop {
  system: cyclic;
  symbols: "GO~";
  range: infinite 0;
}
.count-down {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Consolas, Monaco, monospace;
  font-size: 120px;
}
.count-down::after {
  --t: 5;
  --dur: 1;
  content: counter(time, stop);
  counter-reset: time var(--t);
  animation: count calc(var(--t) * var(--dur) * 1s) steps(var(--t)) forwards, shark calc(var(--dur) * 1s) calc(var(--dur) * 0.8s) calc(var(--t));
}

@keyframes count {
  to {
    --t: 0;
  }
}
@keyframes shark {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  20% {
    opacity: 0;
    transform: scale(0.4);
  }
}